<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/template/template_dialog.xhtml">
	<ui:define name="head">
		<title>保护响应特性分析</title>
		<link rel="stylesheet" href="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.css" />
		<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style type="text/css">
		/*保护动作信息*/
		.nav li a, .box-title {font-size: 16px;}		
		.tab-content .tab-pane ul>.active a, .tab-content .tab-pane ul>.active a:hover{
			background-color: #3c8dbc;
			color: white;
		}		
		.nav-tabs-custom {margin-bottom: 0;}
		.noData{text-align:center;margin-top:18%;display:none}	
		#protectAct div:nth-child(3){
		margin-top:-5px !important;
		}	
		/*保护通道告警信息*/
		.bs-callout {
			padding: 20px;
			padding-left: 40px;
			margin: 20px 0;
			border: 1px solid #eee;
			border-left-width: 5px;
			border-radius: 3px;
		}		
		.bs-callout-danger {border-left-color: #ce4844;}		
		.redNum {color: red;font-size: 22px;margin: 5px;}		
		label {margin-left: 10px;margin-right: 10px;font-weight: normal;}		
		input[type="checkbox"] {margin-left: 5px;margin-right: 5px;}
		td.details-control {
		    background: url('/resources/img/table/details_open.png') no-repeat center center;
		    cursor: pointer;
		}
		tr.shown td.details-control {
		    background: url('/resources/img/table/details_close.png') no-repeat center center;
		}		
		.param{
			font-weight: bold;
		    font-size: 18px;
		    margin: 5px;
		    background-color: #cbe6f1;
		}
		#totalNum1,#totalMinutes1,#totalTimes,#totalTimes1,#totalNum2,#totalMinutes2,#totalTimes2{
		    font-weight: bold;
		    font-size: 18px;
		    margin: 5px;
		}
		#totalNum1POB,#totalMinutes1POB,#totalTimesPOB,#totalTimes1POB,#totalNum2POB,#totalMinutes2POB,#totalTimes2POB{
		    font-weight: bold;
		    font-size: 18px;
		    margin: 5px;
		}
		</style>
	</ui:define>
	<ui:define name="content">
		<div id="protect" class="row">
			<div class="col-lg-12 col-xs-12">
				<div class="nav-tabs-custom">
					<!-- Tabs within a box -->
					<ul class="nav nav-tabs pull-left">
						<li class="active"><a href="#protectActDiv" data-toggle="tab">保护动作信息</a></li>
						<li><a href="#protectAlarmDiv" id="alarmDiv" data-toggle="tab">保护通道告警信息</a></li>
					</ul>
					<div class="tab-content no-padding">
						<div class="chart tab-pane active" id="protectActDiv" style="position: relative">
							<div id="noData" class="noData">暂无数据</div>
							<div class="box" style="display: none">
								<div class="box-header">
									<div class="form-inline">
										<input type="text" class="form-control" id="startTimeAct" placeholder="起始日期" />
										至<input type="text" class="form-control" id="endTimeAct" placeholder="终止日期" />
										<button class='btn btn-default' id='check-btnAct'>查询</button>
									</div>
								</div>
								<div class="box-body">
									<div class="nav-tabs-custom">
										<!-- <ul class="nav nav-tabs pull-left">
											<li class="active"><a href="#protectActTime"
												data-toggle="tab">动作时间</a></li>
											<li><a href="#protectActAvg" id="ActAvgDiv"
												data-toggle="tab">平均动作时间</a></li>
										</ul> -->
										<div class="tab-content no-padding">
											<div class="chart tab-pane active" id='protectActTime'>
												<div id="protectAct" style="height: 500px"></div>
											</div>
											<!-- <div class="chart tab-pane" id='protectActAvg'>
												<div id='actAvgTime' style="height: 500px;"></div>
											</div> -->
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="chart tab-pane" id="protectAlarmDiv" style="position: relative">
							<ul class="nav nav-tabs pull-left">
								<li class="active"><a href="#protectOftenBreakDiv" id="protectOftenBreak" data-toggle="tab">保护通道频繁中断</a></li>
								<li><a href="#twoSameTimeBreakDiv" id="twoSameTimeBreak" data-toggle="tab">双通道同时中断</a></li>
							</ul>
							<div class="tab-content no-padding">
								<div class="chart tab-pane active" id="protectOftenBreakDiv" style="position: relative">
									<div class="box-header">
										<ul class="nav nav-tabs pull-right ui-sortable-handle">
											<li class="pull-left header" style="width:1000px;">
												<div class="navbar-form">
													<button id="columnsSelectButtonPOB" style="margin: 10px;" class="btn btn-default" onclick="onSelectDivClick('columnsSelectDivPOB','columnsSelectButtonPOB');">
														#{lang.LieShaiXuan}<span id="columnsSelectButtonIconPOB" class="fa fa-caret-down"></span>
													</button>
													<div class="input-group">
														<div class="btn btn-default"><i class="fa fa-calendar"></i></div>
														<div class="form-group">
															<input type="text" class="form-control" id="startPOB" />
															<input class="form-control" type="text" id="endPOB" />
														</div>
														<button class="btn btn-default" onclick="queryPOB()">#{lang.ChaXun}</button>
													</div>
													<button id="selectButtonPOB" style="margin: 10px;" class="btn btn-default" onclick="onSelectDivClick('selectDivPOB','selectButtonIconPOB');">
														#{lang.ShuJuShaiXuan} <span id="selectButtonIconPOB" class="fa fa-caret-down"></span>
													</button>
												</div>
											</li>
										</ul>
									</div>
									<div class='box-body'>
										<div class="panel-collapse collapse" id="columnsSelectDivPOB" style="position: relative;">
											<table class="table" style="margin: 0;">
												<tbody>
													<tr>
														<td class="col-sm-1" style="font-weight: bold;">#{lang.LieShaiXuan}</td>
														<td class="col-sm-1"><label>
															<input id="columnsAllPOB" checked="checked" type="checkBox" onchange="selectAllColumnsPOB(this.checked,'columnsPOB');" />
															#{lang.QuanXuan}
														</label></td>
														<td id="columnsPOB"> </td>
													</tr>
												</tbody>
											</table>
										</div>
										<div class="panel-collapse collapse" id="selectDivPOB" style="position: relative;">
											<table class="table" style="margin:0;">
												<tbody>
													<tr>
														<td class="col-sm-1" style="font-weight: bold;">#{lang.DianYaDengJi}</td>
														<td class="col-sm-1">
															<label>
																<input id="voltagesAllPOB" checked="checked" type="checkBox" onchange="selectAllPOB(this.checked,'voltagesPOB');" />
																#{lang.QuanXuan}
															</label>
														</td>
														<td id="voltagesPOB">
															<label>
																<input name="voltagesPOB" type="checkbox" checked="checked" onchange="doFilter('POB');" value="500" />
																500kV
															</label> 
															<label>
																<input name="voltagesPOB" type="checkbox" checked="checked" onchange="doFilter('POB');" value="220" />
																220kV
															</label>
														</td>
													</tr>
													<tr>
														<td class="col-sm-1" style="font-weight: bold;">#{lang.XianLu}</td>
														<td class="col-sm-1"><label>
															<input id="linesAllPOB" type="checkBox" checked="checked" onchange="selectAllPOB(this.checked,'linesPOB');" />
															#{lang.QuanXuan}
														</label></td>
														<td id="linesPOB"></td>
													</tr>
												</tbody>
											</table>
										</div>
										<div class="tab-content" style="padding:0;">
											<div class="bs-callout bs-callout-info row" style="margin:0 !important;padding:0px !important;"></div>
										</div>
										<div class="tab-content" style="padding:0;">
											<div style="position: relative;">
												<table class="table" style="margin: 0;">
													<tbody>
														<tr id="strategyOutputPOB">
															<td class="col-sm-1" style="font-weight: bold;">#{lang.ChaXunCeLue}</td>
															<td>#{lang.MouBaoHuZai}<span id="strategyParam12POB" class="param"/>
																#{lang.GaoJingCiShuDaYuDengYu}<span id="strategyParam22POB" class="param"/>
																#{lang.JiWeiPiinFanZhongDuan}<button id="strategyEditPOB" type="button" class="btn btn-default btn-sm fa fa-pencil"/>
															</td>
															<td>  告警数量总计<span id='totalNum1POB'>0</span>条，共<span id='totalMinutes1POB'>0</span>分钟，其中过滤到通信通道异常<span id="totalTimes1POB">0</span>条。</td>
														</tr>
														<tr id="strategyInputPOB" style="display:none;">
															<td class="col-sm-1" style="font-weight: bold;">#{lang.ChaXunCeLue}</td>
															<td>#{lang.MouBaoHuZai}<input id="strategyParam11POB" type="number" style="width: 50px;"/>
																#{lang.GaoJingCiShuDaYuDengYu}<input id="strategyParam21POB" type="number" style="width: 50px;"/>
																#{lang.JiWeiPiinFanZhongDuan}
																<button id="strategyCheckPOB" type="button" class="btn btn-default btn-sm fa fa-check"/>
																<button id="strategyClosePOB" type="button" class="btn btn-default btn-sm fa fa-close"/>
															</td>
															<td>  告警数量总计<span id='totalNum2POB'>0</span>条，共<span id='totalMinutes2POB'>0</span>分钟，其中过滤到通信通道异常<span id="totalTimes2POB">0</span>条。</td>
														</tr>
													</tbody>
												</table>
											</div>
											<div class="chart" id="tableDivPOB" style="position: relative;"><table id="alarmTablePOB" class="table table-gray"></table></div>
										</div>
									</div>
								</div>
								<div class="chart tab-pane" id="twoSameTimeBreakDiv" style="position: relative">
									<div class="box-header">
										<ul id="selectUL" class="nav nav-tabs pull-right ui-sortable-handle">
											<li class="pull-left header" style="width: 1000px;">
												<div class="navbar-form">
													<button id="columnsSelectButton" style="margin: 10px;" class="btn btn-default" onclick="onSelectDivClick('columnsSelectDiv','columnsSelectButtonIcon');">
														#{lang.LieShaiXuan}<span id="columnsSelectButtonIcon" class="fa fa-caret-down"></span>
													</button>
													<div class="input-group">
														<div class="btn btn-default"><i class="fa fa-calendar"></i></div>
														<div class="form-group">
															<input type="text" class="form-control" id="start" />
															<input class="form-control" type="text" id="end" />
														</div>
														<button class="btn btn-default" onclick="query()">#{lang.ChaXun}</button>
													</div>
													<button id="selectButton" style="margin: 10px;" class="btn btn-default" onclick="onSelectDivClick('selectDiv','selectButtonIcon');">
														#{lang.ShuJuShaiXuan}<span id="selectButtonIcon" class="fa fa-caret-down"></span>
													</button>
												</div>
											</li>
										</ul>
									</div>
									<div class='box-body'>
										<div id="twoSameTimeBreakInfo">
											<div id="twoSameTimeBreakCon" class="row" style="padding-left: 20px; padding-right: 20px;">
												<div class="nav-tabs-custom">
													<div class="panel-collapse collapse" id="columnsSelectDiv"
														style="position: relative;">
														<table class="table" style="margin: 0;">
															<tbody>
																<tr>
																	<td class="col-sm-1" style="font-weight: bold;">#{lang.LieShaiXuan}</td>
																	<td class="col-sm-1">
																		<label> <input id="columnsAll" checked="checked" type="checkBox" onchange="selectAllColumns(this.checked,'columns');" />#{lang.ChaXun}</label>
																	</td>
																	<td id="columns"></td>
																</tr>
															</tbody>
														</table>
													</div>
													<div class="panel-collapse collapse" id="selectDiv" style="position: relative;">
														<table class="table" style="margin: 0;">
															<tbody>
																<tr>
																	<td class="col-sm-1" style="font-weight: bold;">#{lang.DianYaDengJi}</td>
																	<td class="col-sm-1">
																		<label><input id="voltagesAll" checked="checked" type="checkBox" onchange="selectAll(this.checked,'voltages');" />#{lang.QuanXuan}</label>
																	</td>
																	<td id="voltages">
																		<label><input name="voltages" type="checkbox" checked="checked" onchange="doFilter();" value="500" />500kV </label> 
																		<label><input name="voltages" type="checkbox" checked="checked" onchange="doFilter();" value="220" />220kV</label>
																	</td>
																</tr>
																<tr>
																	<td class="col-sm-1" style="font-weight: bold;">#{lang.XianLu}</td>
																	<td class="col-sm-1">
																		<label><input id="linesAll" checked="checked" type="checkBox" onchange="selectAll(this.checked,'lines');" />#{lang.QuanXuan}</label>
																	</td>
																	<td id="lines"></td>
																</tr>
															</tbody>
														</table>
													</div>
													<div style='padding: 10px'>告警数量总计<span id='totalNum'>0</span>条，共<span id='totalMinutes'>0</span>分钟，其中过滤到通信通道异常<span id="totalTimes">0</span>条。
													</div>
													<div class="tab-content" style="padding: 0;">
														<div class="chart" id="tableDiv" style="position: relative;"><table id="alarmTable" class="table table-gray"></table></div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>
		<h:inputHidden id="sid" value="#{request.getParameter('stationId')}"> </h:inputHidden>
		<h:inputHidden id="startTime" value="#{request.getParameter('startTime')}"> </h:inputHidden>
		<h:inputHidden id="endTime" value="#{request.getParameter('endTime')}"> </h:inputHidden>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/js/tables/mytable.js"></script>
		<script src="#{request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/charts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryLineChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script src="/resources/plugins/echarts/echarts.min.v3.7.2.js"></script>
		<script src="/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
		<script src="/resources/js/date-util.js"></script>
		<script>
		locale={
				XuHao:'#{lang.XuHao}',
				ShouCiGaoJing:'#{lang.ShouCiGaoJing}',
				DianYa:'#{lang.DianYa}',
				XianLu:'#{lang.XianLu}',
				BaoHu:'#{lang.BaoHu}',
				ZongJi:'#{lang.ZongJi}',
				mingXi:'#{lang.mingXi}',
				GaoJingShiJian:'#{lang.GaoJingShiJian}',
				BianDianZhan:'#{lang.BianDianZhan}',
				GaoJingNeiRong:'#{lang.GaoJingNeiRong}',
				ZhongDuanShiChang:'#{lang.ZhongDuanShiChang}',
				YiChangDingWei:'#{lang.YiChangDingWei}'
		}
		 var ulHeight = document.getElementById("selectUL").offsetHeight; 
		 var ulWidth = document.getElementById("tableDivPOB").offsetWidth; 
		 var scrollYHeight = wrapperHeight - ulHeight -100;
		 const sid = $("#sid").val();
		 var columns = [ locale.XuHao, locale.ShouCiGaoJing, locale.DianYa, locale.XianLu, locale.BaoHu, locale.ZongJi,locale.mingXi ];
		 const undefinedReplace = '空';			 
		 var start = $('#startTime').val();
		 var end = $('#endTime').val();		 
		 var alarms = [];
		 var currentAlarms = [];
		 var table;
		 var initColumns = columns;
		 var linesLength = 0;
		 var voltagesLength = 2;
		</script>
		<script src="statProtectResponse.js"></script>
	</ui:define>
</ui:composition>
